<head>
    <title>JQuery scrollable fixed header table plugin</title>
    <link href="css/themes/blue/style.css" rel="stylesheet" type="text/css" />
    <link href="css/scrollableFixedHeaderTable.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="javascripts/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript" src="javascripts/jquery.cookie.pack.js">
    </script>
    <script type="text/javascript" src="javascripts/jquery.dimensions.min.js">
    </script>
    <script type="text/javascript" src="javascripts/jquery.scrollableFixedHeaderTable.js">
    </script>
    <script type="text/javascript" src="javascripts/jquery.tablesorter.js">
    </script>
</head>
<body>
    <style>
        .div {
            font-family: Arial, Helvetica, sans-serif;
            border: 1px solid #CCCCCC;
            width: 802px;
        }
        
        .myTable {
            background-color: BLACK;
            font-size: 12px;
        }
        
        .myTable td {
            background-color: WHITE;
        }
        
        .myTable .header th {
            font-weight: bold;
            background-color: #CCCCCC;
        }
    </style>
    <div class="div">
        <table class="myTable tablesorter scrollableFixedHeaderTable" width="1600px" id="myTable1" cellspacing="1">
            <thead>
                <tr class="header">
                    <th>
                        Supplier ID
                    </th>
                    <th>
                        Company Name
                    </th>
                    <th>
                        Contact Name
                    </th>
                    <th>
                        Contact Title
                    </th>
                    <th>
                        Address
                    </th>
                    <th>
                        City
                    </th>
                    <th>
                        Region
                    </th>
                    <th>
                        Postal Code
                    </th>
                    <th>
                        Country
                    </th>
                    <th>
                        Phone
                    </th>
                    <th>
                        Fax
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        Exotic Liquids
                    </td>
                    <td>
                        Charlotte Cooper
                    </td>
                    <td>
                        Purchasing Manager
                    </td>
                    <td>
                        49 Gilbert St.
                    </td>
                    <td>
                        London
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        EC1 4SD
                    </td>
                    <td>
                        UK
                    </td>
                    <td>
                        (171) 555-2222
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        New Orleans Cajun Delights
                    </td>
                    <td>
                        Shelley Burke
                    </td>
                    <td>
                        Order Administrator
                    </td>
                    <td>
                        P.O. Box 78934
                    </td>
                    <td>
                        New Orleans
                    </td>
                    <td>
                        LA
                    </td>
                    <td>
                        70117
                    </td>
                    <td>
                        USA
                    </td>
                    <td>
                        (100) 555-4822
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        Grandma Kelly's Homestead
                    </td>
                    <td>
                        Regina Murphy
                    </td>
                    <td>
                        Sales Representative
                    </td>
                    <td>
                        707 Oxford Rd.
                    </td>
                    <td>
                        Ann Arbor
                    </td>
                    <td>
                        MI
                    </td>
                    <td>
                        48104
                    </td>
                    <td>
                        USA
                    </td>
                    <td>
                        (313) 555-5735
                    </td>
                    <td>
                        (313) 555-3349
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>
                        Tokyo Traders
                    </td>
                    <td>
                        Yoshi Nagase
                    </td>
                    <td>
                        Marketing Manager
                    </td>
                    <td>
                        9-8 Sekimai Musashino-shi 
                    </td>
                    <td>
                        Tokyo
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        100
                    </td>
                    <td>
                        Japan
                    </td>
                    <td>
                        (03) 3555-5011
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                    <td>
                        Cooperativa de Quesos 'Las Cabras'
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        Export Administrator
                    </td>
                    <td>
                        Calle del Rosal 4
                    </td>
                    <td>
                        Oviedo
                    </td>
                    <td>
                        Asturias
                    </td>
                    <td>
                        33007
                    </td>
                    <td>
                        Spain
                    </td>
                    <td>
                        (98) 598 76 54
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        6
                    </td>
                    <td>
                        Mayumi's
                    </td>
                    <td>
                        Mayumi Ohno
                    </td>
                    <td>
                        Marketing Representative
                    </td>
                    <td>
                        92 Setsuko Chuo-ku 
                    </td>
                    <td>
                        Osaka
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        545
                    </td>
                    <td>
                        Japan
                    </td>
                    <td>
                        (06) 431-7877
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        7
                    </td>
                    <td>
                        Pavlova, Ltd.
                    </td>
                    <td>
                        Ian Devling
                    </td>
                    <td>
                        Marketing Manager
                    </td>
                    <td>
                        74 Rose St. Moonie Ponds 
                    </td>
                    <td>
                        Melbourne
                    </td>
                    <td>
                        Victoria
                    </td>
                    <td>
                        3058
                    </td>
                    <td>
                        Australia
                    </td>
                    <td>
                        (03) 444-2343
                    </td>
                    <td>
                        (03) 444-6588
                    </td>
                </tr>
                <tr>
                    <td>
                        8
                    </td>
                    <td>
                        Specialty Biscuits, Ltd.
                    </td>
                    <td>
                        Peter Wilson
                    </td>
                    <td>
                        Sales Representative
                    </td>
                    <td>
                        29 King's Way
                    </td>
                    <td>
                        Manchester
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        M14 GSD
                    </td>
                    <td>
                        UK
                    </td>
                    <td>
                        (161) 555-4448
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        9
                    </td>
                    <td>
                        PB
                        Kn&auml;ckebr&ouml;d
                        AB
                    </td>
                    <td>
                        Lars Peterson
                    </td>
                    <td>
                        Sales Agent
                    </td>
                    <td>
                        Kaloadagatan 13
                    </td>
                    <td>
                        G&ouml;teborg
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        S-345 67
                    </td>
                    <td>
                        Sweden
                    </td>
                    <td>
                        031-987 65 43
                    </td>
                    <td>
                        031-987 65 91
                    </td>
                </tr>
                <tr>
                    <td>
                        10
                    </td>
                    <td>
                        Refrescos Americanas LTDA
                    </td>
                    <td>
                        Carlos Diaz
                    </td>
                    <td>
                        Marketing Manager
                    </td>
                    <td>
                        Av. das Americanas 12.890
                    </td>
                    <td>
                        S&atilde;o
                        Paulo
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        5442
                    </td>
                    <td>
                        Brazil
                    </td>
                    <td>
                        (11) 555 4640
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        11
                    </td>
                    <td>
                        Heli
                        S&uuml;&szlig;waren
                        GmbH &amp; Co. KG
                    </td>
                    <td>
                        Petra Winkler
                    </td>
                    <td>
                        Sales Manager
                    </td>
                    <td>
                        Tiergartenstra&szlig;e
                        5
                    </td>
                    <td>
                        Berlin
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        10785
                    </td>
                    <td>
                        Germany
                    </td>
                    <td>
                        (010) 9984510
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        12
                    </td>
                    <td>
                        Plutzer
                        Lebensmittelgro&szlig;m&auml;rkte
                        AG
                    </td>
                    <td>
                        Martin Bein
                    </td>
                    <td>
                        International Marketing Mgr.
                    </td>
                    <td>
                        Bogenallee 51
                    </td>
                    <td>
                        Frankfurt
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        60439
                    </td>
                    <td>
                        Germany
                    </td>
                    <td>
                        (069) 992755
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        13
                    </td>
                    <td>
                        Nord-Ost-Fisch Handelsgesellschaft mbH
                    </td>
                    <td>
                        Sven Petersen
                    </td>
                    <td>
                        Coordinator Foreign Markets
                    </td>
                    <td>
                        Frahmredder 112a
                    </td>
                    <td>
                        Cuxhaven
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        27478
                    </td>
                    <td>
                        Germany
                    </td>
                    <td>
                        (04721) 8713
                    </td>
                    <td>
                        (04721) 8714
                    </td>
                </tr>
                <tr>
                    <td>
                        14
                    </td>
                    <td>
                        Formaggi Fortini s.r.l.
                    </td>
                    <td>
                        Elio Rossi
                    </td>
                    <td>
                        Sales Representative
                    </td>
                    <td>
                        Viale Dante, 75
                    </td>
                    <td>
                        Ravenna
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        48100
                    </td>
                    <td>
                        Italy
                    </td>
                    <td>
                        (0544) 60323
                    </td>
                    <td>
                        (0544) 60603
                    </td>
                </tr>
                <tr>
                    <td>
                        15
                    </td>
                    <td>
                        Norske Meierier
                    </td>
                    <td>
                        Beate Vileid
                    </td>
                    <td>
                        Marketing Manager
                    </td>
                    <td>
                        Hatlevegen 5
                    </td>
                    <td>
                        Sandvika
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        1320
                    </td>
                    <td>
                        Norway
                    </td>
                    <td>
                        (0)2-953010
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        16
                    </td>
                    <td>
                        Bigfoot Breweries
                    </td>
                    <td>
                        Cheryl Saylor
                    </td>
                    <td>
                        Regional Account Rep.
                    </td>
                    <td>
                        3400 - 8th Avenue Suite 210 
                    </td>
                    <td>
                        Bend
                    </td>
                    <td>
                        OR
                    </td>
                    <td>
                        97101
                    </td>
                    <td>
                        USA
                    </td>
                    <td>
                        (503) 555-9931
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        17
                    </td>
                    <td>
                        Svensk
                        Sj&ouml;f&ouml;da
                        AB
                    </td>
                    <td>
                        Michael
                        Bj&ouml;rn
                    </td>
                    <td>
                        Sales Representative
                    </td>
                    <td>
                        Brovallav&auml;gen
                        231
                    </td>
                    <td>
                        Stockholm
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        S-123 45
                    </td>
                    <td>
                        Sweden
                    </td>
                    <td>
                        08-123 45 67
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        18
                    </td>
                    <td>
                        Aux
                        joyeux eccl&eacute;siastiques
                    </td>
                    <td>
                        Guyl&egrave;ne
                        Nodier
                    </td>
                    <td>
                        Sales Manager
                    </td>
                    <td>
                        203, Rue des Francs-Bourgeois
                    </td>
                    <td>
                        Paris
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        75004
                    </td>
                    <td>
                        France
                    </td>
                    <td>
                        (1) 03.83.00.68
                    </td>
                    <td>
                        (1) 03.83.00.62
                    </td>
                </tr>
                <tr>
                    <td>
                        19
                    </td>
                    <td>
                        New England Seafood Cannery
                    </td>
                    <td>
                        Robb Merchant
                    </td>
                    <td>
                        Wholesale Account Agent
                    </td>
                    <td>
                        Order Processing Dept. 2100 Paul Revere Blvd. 
                    </td>
                    <td>
                        Boston
                    </td>
                    <td>
                        MA
                    </td>
                    <td>
                        02134
                    </td>
                    <td>
                        USA
                    </td>
                    <td>
                        (617) 555-3267
                    </td>
                    <td>
                        (617) 555-3389
                    </td>
                </tr>
                <tr>
                    <td>
                        20
                    </td>
                    <td>
                        Leka Trading
                    </td>
                    <td>
                        Chandra Leka
                    </td>
                    <td>
                        Owner
                    </td>
                    <td>
                        471 Serangoon Loop, Suite #402
                    </td>
                    <td>
                        Singapore
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        0512
                    </td>
                    <td>
                        Singapore
                    </td>
                    <td>
                        555-8787
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        21
                    </td>
                    <td>
                        Lyngbysild
                    </td>
                    <td>
                        Niels Petersen
                    </td>
                    <td>
                        Sales Manager
                    </td>
                    <td>
                        Lyngbysild Fiskebakken 10 
                    </td>
                    <td>
                        Lyngby
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        2800
                    </td>
                    <td>
                        Denmark
                    </td>
                    <td>
                        43844108
                    </td>
                    <td>
                        43844115
                    </td>
                </tr>
                <tr>
                    <td>
                        22
                    </td>
                    <td>
                        Zaanse Snoepfabriek
                    </td>
                    <td>
                        Dirk Luchte
                    </td>
                    <td>
                        Accounting Manager
                    </td>
                    <td>
                        Verkoop Rijnweg 22 
                    </td>
                    <td>
                        Zaandam
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        9999 ZZ
                    </td>
                    <td>
                        Netherlands
                    </td>
                    <td>
                        (12345) 1212
                    </td>
                    <td>
                        (12345) 1210
                    </td>
                </tr>
                <tr>
                    <td>
                        23
                    </td>
                    <td>
                        Karkki Oy
                    </td>
                    <td>
                        Anne Heikkonen
                    </td>
                    <td>
                        Product Manager
                    </td>
                    <td>
                        Valtakatu 12
                    </td>
                    <td>
                        Lappeenranta
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        53120
                    </td>
                    <td>
                        Finland
                    </td>
                    <td>
                        (953) 10956
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        24
                    </td>
                    <td>
                        G'day, Mate
                    </td>
                    <td>
                        Wendy Mackenzie
                    </td>
                    <td>
                        Sales Representative
                    </td>
                    <td>
                        170 Prince Edward Parade Hunter's Hill 
                    </td>
                    <td>
                        Sydney
                    </td>
                    <td>
                        NSW
                    </td>
                    <td>
                        2042
                    </td>
                    <td>
                        Australia
                    </td>
                    <td>
                        (02) 555-5914
                    </td>
                    <td>
                        (02) 555-4873
                    </td>
                </tr>
                <tr>
                    <td>
                        25
                    </td>
                    <td>
                        Ma Maison
                    </td>
                    <td>
                        Jean-Guy Lauzon
                    </td>
                    <td>
                        Marketing Manager
                    </td>
                    <td>
                        2960 Rue St. Laurent
                    </td>
                    <td>
                        Montr&eacute;al
                    </td>
                    <td>
                        Qu&eacute;bec
                    </td>
                    <td>
                        H1J 1C3
                    </td>
                    <td>
                        Canada
                    </td>
                    <td>
                        (514) 555-9022
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        26
                    </td>
                    <td>
                        Pasta Buttini s.r.l.
                    </td>
                    <td>
                        Giovanni Giudici
                    </td>
                    <td>
                        Order Administrator
                    </td>
                    <td>
                        Via dei Gelsomini, 153
                    </td>
                    <td>
                        Salerno
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        84100
                    </td>
                    <td>
                        Italy
                    </td>
                    <td>
                        (089) 6547665
                    </td>
                    <td>
                        (089) 6547667
                    </td>
                </tr>
                <tr>
                    <td>
                        27
                    </td>
                    <td>
                        Escargots Nouveaux
                    </td>
                    <td>
                        Marie Delamare
                    </td>
                    <td>
                        Sales Manager
                    </td>
                    <td>
                        22, rue H. Voiron
                    </td>
                    <td>
                        Montceau
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        71300
                    </td>
                    <td>
                        France
                    </td>
                    <td>
                        85.57.00.07
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        28
                    </td>
                    <td>
                        Gai
                        p&acirc;turage
                    </td>
                    <td>
                        Eliane Noz
                    </td>
                    <td>
                        Sales Representative
                    </td>
                    <td>
                        Bat. B 3, rue des Alpes 
                    </td>
                    <td>
                        Annecy
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        74000
                    </td>
                    <td>
                        France
                    </td>
                    <td>
                        38.76.98.06
                    </td>
                    <td>
                        38.76.98.58
                    </td>
                </tr>
                <tr>
                    <td>
                        29
                    </td>
                    <td>
                        For&ecirc;ts
                        d'&eacute;rables
                    </td>
                    <td>
                        Chantal Goulet
                    </td>
                    <td>
                        Accounting Manager
                    </td>
                    <td>
                        148 rue Chasseur
                    </td>
                    <td>
                        Ste-Hyacinthe
                    </td>
                    <td>
                        Qu&eacute;bec
                    </td>
                    <td>
                        J2S 7S8
                    </td>
                    <td>
                        Canada
                    </td>
                    <td>
                        (514) 555-2955
                    </td>
                    <td>
                        (514) 555-2921
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<style>
    .freezCol {
        position: absolute;
        overflow: hidden;
        z-index: 100;
    }
    
    .freezColHeader {
        position: absolute;
        z-index: 101;
    }
</style>
<script>
    $(document).ready(function(){
        var lastColIndex = 2;
        $('#myTable1').scrollableFixedHeaderTable(800, 200);
        
        /* freeze column */
        colIds = freezeFirstColumnSorter('myTable1', lastColIndex);
        
        $('#myTable1').tablesorter().bind('sortEnd', function(){
            var $cloneTH = $('.sfhtHeader thead th');
            var $trueTH = $('.sfhtData thead th');
            $cloneTH.each(function(index){
                $(this).attr('class', $($trueTH[index]).attr('class'));
            });
            
            
            var $th = $(colIds.colHeaderId + ' th')
            /* copy the css class from the original header */
            $th.attr('class', $cloneTH.attr('class'));
            /* copy the css class to the floating column header from the tablesorter column */
            $('#' + colIds.colHeaderId + ' th').each(function(index){
                $(this).attr('class', $('.sfhtData thead th:nth(' + index + ')').attr('class'));
            });
            
            var $newContent = $('#myTable1').clone().attr('id', colIds.colBodyId);
            $newContent.removeAttr('width');
            $newContent.children().children().each(function(){
                $(this).children(':gt(' + lastColIndex + ')').remove()
            });
            $('#' + colIds.colBodyId).parent().html($newContent);
        });
        
        /* copy the css class to the floating column header from the tablesorter column */
        $('#' + colIds.colHeaderId + ' th').attr('class', $('.sfhtData thead th:nth(0)').attr('class'));
        
        /* synchronize sortable and scrollable */
        $('.sfhtHeader thead th').each(function(index){
            var $cloneTH = $(this);
            var $trueTH = $($('.sfhtData thead th')[index]);
            $cloneTH.attr('class', $trueTH.attr('class'));
            $cloneTH.click(function(){
                $trueTH.click();
            });
        });
        
        /* sync the floating column header too */
        $('#' + colIds.colHeaderId + ' th').each(function(index){
            $(this).click(function(){
                $('.sfhtData thead th:nth(' + index + ')').click();
            });
        });
    });
    
    /* dirty solution, not good for large tables:
     clone table and reduce to first columns
     TODO: copy only the columns instead of reducing the clone
     
     This returns object holding the ids of the clone table.
     colBodyId = tableId + '_column'
     colHeaderId = tableId + _columnHeader
     */
    function freezeFirstColumnSorter(tableId, lastColIndex){
        if (!lastColIndex) {
            lastColIndex = 0;
        }
        
        /* object to be returned */
        var ids = {};
        ids.colBodyId = tableId + '_column';
        ids.colHeaderId = tableId + '_columnHeader';
        
        var $columnTable = $('.sfhtData #' + tableId).clone().attr('id', ids.colBodyId);
        $columnTable.removeAttr('width');
        $columnTable.children().children().each(function(){
            $(this).children(':gt(' + lastColIndex + ')').remove()
        });
        $columnTable.wrap('<div></div>');
        
        /* floating column */
        var $colDiv = $columnTable.parent();
        $colDiv.attr('class', 'freezCol');
        
        /* floating header of the floating column */
        var $columnTableHeader = $columnTable.clone();
        $columnTableHeader.children(':gt(' + 0 + ')').remove();
        $columnTableHeader.attr('id', ids.colHeaderId)
        $columnTableHeader.wrap('<div></div>');
        var $colHeaderDiv = $columnTableHeader.parent();
        $colHeaderDiv.addClass('freezColHeader');
        
        /* $().innerHeight does not seem to work so 17px which is common in a default theme
         was subtracted to get the innerHeight */
        var scrollHeight = $('#' + tableId).parents('[class="sfhtTable"]').innerHeight() - 17;
        $colDiv.height(scrollHeight);
        
        /* ref var for floating header */
        var $sfhtHeader = $('#' + tableId).parents('[class="sfhtTable"]').find('.sfhtHeader');
        
        /* add the header of the floating column */
        $sfhtHeader.parent().append($colHeaderDiv);
        
        /* add the floating column */
        $sfhtHeader.parent().append($colDiv);
        
        /* sync vertical scroll */
        $('#' + tableId).parent().scroll(function(){
            $colDiv.scrollTop($(this).scrollTop());
        });
        
        /* return id object */
        return ids;
    }
</script>
